<template>
  <view class="tab-bar">
    <view class="tab-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(index)">
      <image v-if="index === 2" class="center-icon" :src="item.iconPath" mode="aspectFit"></image>
      <view v-else class="tab-icon">
        <image :src="currentIndex === index ? item.selectedIconPath : item.iconPath" mode="aspectFit"></image>
        <text :class="{ 'active-text': currentIndex === index }">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      tabList: [
        { text: '首页', iconPath: '/static/tabbar/home.png', selectedIconPath: '/static/tabbar/home.png' },
        { text: '分类', iconPath: '/static/tabbar/category.png', selectedIconPath: '/static/tabbar/category.png' },
        { text: '', iconPath: '/static/tabbar/center.png', selectedIconPath: '/static/tabbar/center.png' },
        { text: '购物车', iconPath: '/static/tabbar/cart.png', selectedIconPath: '/static/tabbar/cart.png' },
        { text: '我的', iconPath: '/static/tabbar/user.png', selectedIconPath: '/static/tabbar/user.png' }
      ]
    };
  },
  methods: {
    switchTab(index) {
      this.currentIndex = index;
      this.$emit('tab-change', index);
    }
  }
};
</script>

<style scoped lang="scss" >
.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background-color: #ffffff;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
}

.tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.center-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  bottom: -20px;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.tab-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab-icon image {
  width: 40px;
  height: 40px;
}

.active-text {
  color: #007AFF;
}
</style>